import { StyleSheet } from 'react-native';
import { px } from '../../../../../../util/adapt';
import { APP_BLACK } from '../../../../../../constant/color';
import {
  CARD_HEIGHT,
  CONTENT_WIDTH,
  LIVE_AREA,
  LIVE_AREA_HEIGHT,
  MARGIN_TOP
} from '../../../../constant';

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    width: CONTENT_WIDTH,
    height: CARD_HEIGHT,
    justifyContent: 'center'
  },
  video: {
    width: CONTENT_WIDTH,
    height: CARD_HEIGHT
  },
  teacherContent: {
    position: 'absolute',
    right: 0,
    top: MARGIN_TOP,
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT,
    overflow: 'hidden',
    backgroundColor: 'red'
  },
  teacherVideo: {
    marginTop: (LIVE_AREA_HEIGHT - LIVE_AREA) / 2,
    width: LIVE_AREA,
    height: LIVE_AREA
  },
  progress: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: px(120),
    height: px(60),
    borderRadius: px(30),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red'
  },
  videoType: {
    position: 'absolute',
    left: 0,
    top: 0,
    color: 'red'
  },
  progressDesc: {
    color: '#ffffff',
    fontSize: px(25),
    fontWeight: 'bold'
  },
  empty: {
    position: 'absolute',
    right: 0,
    top: 0,
    width: LIVE_AREA,
    height: LIVE_AREA_HEIGHT,
    backgroundColor: APP_BLACK,
    alignItems: 'center',
    justifyContent: 'center'
  },
  emptyDesc: {
    color: '#6D7278',
    fontSize: px(22),
    fontWeight: '600'
  }
});
